<template>
	<view>
		<u-navbar title="添加商品規格" placeholder autoBack>
			<view class="flexright xiaohui" slot="right" @click="addList">新增</view>
		</u-navbar>
		<view style="padding-bottom: 180rpx;" v-if="flag">
			<view class="mainpadding2s margin_top2 flexbetween radius" v-if="spuList.length" style="background-color: #ffa126;" @click="paixu">
				<view class="xiaobai main_size bold">排序</view>
				<u-icon name="list" color="#fff" size="16"></u-icon>
			</view>
			<view class="mainpadding_top ffffff" v-for="(item,index) in spuList" :key="index">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="titletext hei_text bold margin_right1">規格標題</view>
					</view>
					<view @click="delSpu(item,index)">
						<u-icon name="trash" color="#ff0000" size="18"></u-icon>
					</view>
				</view>
				<view class="bghui mainpadding_top radius">
					<input type="text" class="hei_text main_size bold" placeholder="請輸入規格標題" v-model="item.name">
				</view>
				<view class="margin_top flexbetween" @click="checkcolorIndex=index;jumpurl('/pages/workbench/yanseb')">
					<view class="titletext bold hei_text">顔色</view>
					<view class="flexright">
						<view class="radius margin_right1" v-show="item.font_color" style="width: 50rpx;height: 50rpx;"
							:style="[{ backgroundColor: item.font_color }]"></view>
						<view class="main_size bold hei_text margin_right1">{{item.font_color || "請選擇"}}</view>
						<u-icon name="arrow-right" color="#333" size="16"></u-icon>
					</view>
				</view>
				<template v-if="type==0">
					<view class="flexbetween margin_top">
						<view class="titletext hei_text bold">必選數量</view>
						<u-radio-group v-model="item.fh" placement="row" circle>
							<u-radio activeColor="#feb800" :customStyle="{marginRight: '30rpx'}" label="等於"
								name="1"></u-radio>
							<u-radio activeColor="#feb800" label="大於等於" name="2"></u-radio>
						</u-radio-group>
					</view>
				</template>
				<template v-if="type==1">
					<view class="flexbetween margin_top">
						<view class="titletext hei_text bold">商家必選數量</view>
						<u-radio-group v-model="item.fh" placement="row" circle>
							<u-radio activeColor="#feb800" :customStyle="{marginRight: '30rpx'}" label="等於"
								name="1"></u-radio>
							<u-radio activeColor="#feb800" label="大於等於" name="2"></u-radio>
						</u-radio-group>
					</view>
					<view class="bghui mainpadding_top radius">
						<input type="number" class="hei_text main_size bold" placeholder="請輸入必選數量" v-model="item.num_b">
					</view>
				</template>
				<template v-if="type==1">
					<view class="flexbetween margin_top">
						<view class="titletext hei_text bold">員工必選數量</view>
						<u-radio-group v-model="item.ygfh" placement="row" circle>
							<u-radio activeColor="#feb800" :customStyle="{marginRight: '30rpx'}" label="等於"
								name="1"></u-radio>
							<u-radio activeColor="#feb800" label="大於等於" name="2"></u-radio>
						</u-radio-group>
					</view>
					<view class="bghui mainpadding_top radius">
						<input type="number" class="hei_text main_size bold" placeholder="請輸入必選數量"
							v-model="item.ygnum_b">
					</view>
				</template>

				<view class="flexbetween margin_top">
					<view class="titletext hei_text bold">新增規格内容</view>
				</view>
				<view class="flexleft margin_top">
					<view class="names">
						<input type="text" placeholder="請輸入規格内容" v-model="item.arrtName">
					</view>
					<view class="add" @click="addAttr(item.arrtName,index)">添加</view>
				</view>
				<!-- 属性 -->
				<view class="bghui radius mainpadding_top flexleft" v-for="(value,i) in item.goods_spunat" :key="i">
					<view class="">
						<view class="itemimgBox flexcenter margin_right2" v-for="(ite,it) in value.image_arr" :key="it">
							<!-- 已上传 -->
							<image class="listleftimg radius" :src="ite" mode=""></image>
							<view class="deleteimg" @click="deleimage(it,value.images,value.image_arr)"></view>
						</view>
						<view class="itemimgBox flexcenter margin_right2"
							@click="uploadImg(value.images,value.image_arr,1)" v-if="value.image_arr.length<1">
							<!-- 未上传 -->
							<image class="listleftimg radius" src="@/static/image/system/upimg.png" mode=""></image>
						</view>
					</view>
					<view class="">
						<view class="flexbetween">
							<view class="hei_text titletext bold">{{value.name}}</view>
							<view @click="delAttr(value,index,i)">
								<u-icon name="trash" color="#ff0000" size="16"></u-icon>
							</view>
						</view>
						<template v-if="type==0">
							<view class="mainpadding_top ffffff radius margin_right1 flexbetween">
								<view class="hui_text main_size bold" style="min-width: 60rpx;">價格</view>
								<input type="number" class="huang_text main_size bold" placeholder=""
									v-model="value.money">
							</view>
						</template>
						<template v-if="type==1">
							<view class="flexleft">
								<view class="mainpadding_top ffffff radius margin_right1 flexbetween">
									<view class="hui_text main_size bold" style="min-width: 120rpx;">分店價格</view>
									<input type="number" class="huang_text main_size bold" placeholder=""
										v-model="value.money">
								</view>
								<view class="mainpadding_top ffffff radius flexbetween">
									<view class="hui_text main_size bold" style="min-width: 120rpx;">員工價格</view>
									<input type="number" class="huang_text main_size bold" placeholder=""
										v-model="value.yg_money">
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<view class="mainpadding posibottom flexbetween" style="bottom: 0;">
				<view class="submitbtn margin_top1" style="width: 45%;"
					@click="jumpurl('/pages/workbench/guigefllb?type=1')">導入範例</view>
				<view class="submitbtn margin_top1" style="width: 45%;" @click="confirm">確認</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				spuList: [],
				spuId: [], //规格id列表
				goods_id: "", //商品id
				currentindex: "",
				flag: true,
				type: 0, //1分店调查选择商品规格2
				checkcolorIndex: 0
			}
		},
		onLoad(options) {
			if (options.id) {
				this.goods_id = options.id
				this.getSpuList()
			}
			if (options.type) {
				let data = JSON.parse(decodeURIComponent(options.msg))
				this.type = options.type
				this.spuList = data
			}
			uni.$on("checkggmb", data => {
				data.forEach(item => {
					if (item.ischeck) {
						item.goods_spunat.forEach(current => {
							this.$set(current, 'yg_money', "")
						})
						this.spuList.push({
							id: "", //规格id
							name: item.name, //规格标题
							num_b: item.num, //必选数量
							arrtName: "", //属性名称
							attrId: [], //属性id列表
							goods_spunat: item.goods_spunat, //属性列表
							fh: item.fh.toString(),
							ygfh: "",
							ygnum_b: "",
							font_color:item.font_color,
							weigh:0
						})
					}
				})
			})
			uni.$on("checkColor", data => {
				this.spuList[this.checkcolorIndex].font_color = data
				console.log(data, "選擇顔色");
			})
			uni.$on("guigepx", data => {
				this.spuList = data
			})
		},
		onUnload() {
			uni.$off("checkggmb")
			uni.$off("checkColor")
			uni.$off("guigepx")
		},
		methods: {
			paixu(){
				for (let i = 0; i < this.spuList.length; i++) {
					let item = this.spuList[i]
					if (!item.name) {
						this.http.toast("請將第"+(i+1)+"項商品規格名稱補充完整！")
						return false
					}
				}
				uni.navigateTo({
					url: "/pages/workbench/guigeerpx?msg=" + encodeURIComponent(JSON.stringify(this.spuList))
				})
			},
			async getSpuList() {
				let _this = this
				let res = await this.http.request('/api/goods/deailSpu', 'POST', {
					goods_id: this.goods_id,
					shop_id: uni.getStorageSync("shop_id"),
				})
				if (res.code == 1) {
					let images = []
					let image_arr = []
					let attrId = []
					res.data.forEach(item => {
						attrId = []
						item.goods_spunat.forEach(value => {
							images = []
							image_arr = []
							if (value.image) {
								images.push(value.image)
								image_arr.push(this.imgUrlUser + value.image)
							}
							attrId.push(value.id)
							this.$set(value, "images", images)
							this.$set(value, "image_arr", image_arr)
							this.$set(item, "attrId", attrId)
						})
						this.spuId.push(item.id)
					})
					this.spuList = res.data
				} else if (res.code == 0) {} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			addList() { //新增规格
				this.spuList.push({
					id: "", //规格id
					name: "", //规格标题
					num_b: "", //必选数量
					arrtName: "", //属性名称
					attrId: [], //属性id列表
					goods_spunat: [], //属性列表
					font_color:"",
					fh: "1",
					weigh:0
				})
			},
			delSpu(item, index) { //刪除规格
				this.spuList.splice(index, 1)
				console.log(this.spuList);
				if (!item.id) {
					return false
				}
				this.getDelSpu(item.id)
			},
			async getDelSpu(id) {
				let res = await this.http.request("/api/goods/delSpu", 'POST', {
					id
				})
				if (res.code == 1) {
					this.http.toast("刪除成功！")
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			addAttr(arrtName, index) { //新增属性
				if (!arrtName) {
					this.http.toast("請先輸入規格内容！")
					return false
				}
				this.spuList[index].arrtName = ""
				this.spuList[index].goods_spunat.push({
					id: "", //属性id
					name: arrtName, //属性名称
					money: "", //价格
					yg_money: "", //員工价格
					images: [], //规格图片
					image_arr: [], //规格图片展示
					fh: "1",
					ygfh: "",
					ygnum_b: "",
				})
			},
			delAttr(value, index, i) {
				this.spuList[index].goods_spunat.splice(i, 1)
				if (!value.id) {
					return false
				}
				this.getDelAttr(value.id)
			},
			async getDelAttr(id) {
				let res = await this.http.request("/api/goods/delSpunat", 'POST', {
					id
				})
				if (res.code == 1) {
					this.http.toast("刪除成功！")
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			deleimage(i, upimg, arr) { //刪除图片
				upimg.splice(i, 1)
				arr.splice(i, 1)
			},
			fendiandcadd() {
				uni.$emit("checkfxdcFn", this.spuList)
				uni.navigateBack(1)
			},
			confirm() {
				if (this.type == 1) { //分店调查添加
					this.fendiandcadd()
					return false
				}
				if (!this.spuList.length) {
					this.spuId = []
					this.submit()
				}
				let spuListArr = this.spuList
				for (let i = 0; i < spuListArr.length; i++) {
					let item = spuListArr[i]
					if (!item.name || !item.goods_spunat.length) {
						this.http.toast("請將商品規格資訊補充完整！")
						return false
					}
					if (!item.num_b) {
						item.num_b = 0
					}
					if (item.num_b == 0 && item.fh == 1) {
						this.http.toast(item.name + "的必選數量為0時需要勾選大於等於！")
						return false
					}
					for (let b = 0; b < item.goods_spunat.length; b++) {
						let value = item.goods_spunat[b]
						if (!value.name) {
							this.http.toast("請將規格内容資訊補充完整！")
							return false
						}
					}
				}
				spuListArr.forEach((item, index) => {
					item.goods_spunat.forEach((value, i) => {
						this.addAttrGet(value, index, i)
					})
				})
			},
			async addAttrGet(lastval, index, i) {
				let res = await this.http.request("/api/goods/addSpunat", 'POST', {
					id: lastval.id, //属性id
					name: lastval.name, //属性名称
					money: lastval.money, //价格
					image: lastval.images.join(), //图片
				})
				if (res.code == 1) {
					let arr = this.spuList[index].attrId
					arr.push(res.data)
					this.spuList[index].attrId = arr
					if (i == this.spuList[index].goods_spunat.length - 1) {
						uni.showLoading({
							mask: true,
							title: "請稍後"
						})
						setTimeout(() => {
							this.addSpuGet(index)
						}, 100)
					}
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			async addSpuGet(index) { //确定
				let val = this.spuList[index].attrId
				let spunat = []
				for (let i = 0; i < val.length; i++) {
					console.log(val[i]);
					spunat.push(val[i])
				}
				let res = await this.http.request("/api/goods/addSpu", 'POST', {
					id: this.spuList[index].id, //规格id
					name: this.spuList[index].name, //规格标题
					spunat_id: spunat.join(), //属性id
					num_b: this.spuList[index].num_b, //必选数量
					fh: this.spuList[index].fh.toString(),
					weigh:this.spuList[index].weigh,
					font_color:this.spuList[index].font_color,
				})
				if (res.code == 1) {
					if (res.data !== 1) {
						this.spuId.push(Number(res.data))
					}
					if (index == this.spuList.length - 1) {
						this.submit(1)
					}
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			submit(val) {
				if (val == 1) {
					this.http.toast("添加成功！")
				}
				uni.$emit("selectSpu", this.spuId)
				setTimeout(() => {
					uni.navigateBack(1)
				}, 500)
			}
		}
	}
</script>

<style scoped>
	::v-deep.u-radio-group {
		flex: none !important;
	}

	.itemimgBox {
		width: auto;
		position: relative;
	}

	.names {
		width: 85%;
		border: 2rpx solid #ffb800;
		padding: 25rpx 30rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border-right: none;
	}

	.add {
		width: 15%;
		color: #333;
		background-color: #ffb800;
		padding: 29rpx 20rpx 32rpx 28rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.line {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid RGBA(247, 247, 247, 1);
	}
</style>